<template>
	<u-popup
		:show="show"
		closeOnClickOverlay
		safeAreaInsetBottom
		mode="bottom"
		@close="close"
		@touchmove.native.stop.prevent
	>
		<view class="record">
			<view class="record-time">
				{{ recordStart ? recordTimeShow : "按住说话" }}
			</view>
			<view class="record-row">
				<image
					v-if="recordStop"
					class="icon1"
					src="/static/message/icon-complete.png"
					mode=""
					@click="confirm"
				></image>
				<view @longpress="handleRecordStart" @touchend="handleRecordStop">
					<image
						class="icon2"
						src="/static/message/icon-record.png"
						mode=""
					></image>
				</view>
				<image
					v-if="recordStop"
					class="icon1"
					src="/static/message/icon-cancel.png"
					@click="handleCancelRecord"
					mode=""
				></image>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { uploadFile } from "@/utils/upload.js";

export default {
	name: "record",
	data() {
		return {
			show: false,
			recordStart: false, // 是否开始录音
			recordStop: false, // 录音是否停止
			recordTime: 0, // 录音时间
			recordTimeShow: "00:00", // 要展示的录音时间
			recorderManager: null, // 全局唯一的录音管理器
			tempFilePath: "", // 录音临时文件
			timer: null, // 定时器
		};
	},
	created() {
		// #ifndef H5
		this.recorderManager = uni.getRecorderManager() || {};
		// 监听录音开始事件
		this.recorderManager.onStart(() => {
			console.log("录音开始了");
			this.handleRecordTime(); // 开始录音计时
		});
		// 监听录音停止事件
		this.recorderManager.onStop((e) => {
			console.log("录音停止了", e);
			this.tempFilePath = e.tempFilePath;
			// 限制录音最多1分钟
			if (this.recordTime >= 59) {
				this.recordStop = true;
				uploadFile(e.tempFilePath, "语音", true, "语音发送中...").then(
					(filePath) => {
						console.log("上传的语音文件", filePath);
						this.close();
						this.recordStart = false;
						this.$emit("confirm", `${filePath}|${this.recordTime}`);
					}
				);
			}
		});
		// #endif
	},
	beforeDestroy() {
		this.clearTimer();
	},
	methods: {
		// 弹框关闭
		close() {
			this.show = false;
		},
		// 清除定时器
		clearTimer() {
			this.timer && clearInterval(this.timer);
			this.timer = null;
		},
		// 录音计时
		handleRecordTime() {
			this.recordTime = 0;
			this.recordTimeShow = "00:00";
			this.clearTimer();
			this.timer = setInterval(() => {
				if (this.recordStop) {
					this.clearTimer();
					return;
				}
				this.recordTime += 1;
				this.recordTimeShow =
					Math.floor(this.recordTime / 60)
						.toString()
						.padStart(2, "0") +
					":" +
					(this.recordTime % 60).toString().padStart(2, "0");
			}, 1000);
		},
		// 长按开始录音
		handleRecordStart() {
			// #ifndef H5
			if (this.recordStart) return;
			this.tempFilePath = "";
			this.recordStart = true;
			this.recordStop = false;
			this.recorderManager.start({
				duration: 60000, // 录音的时长，单位 ms，最大值 600000（10 分钟）
			});
			// #endif
		},
		// 停止录音
		handleRecordStop() {
			// #ifndef H5
			this.recorderManager.stop();
			this.recordStop = true;
			// #endif
		},
		// 取消录音
		handleCancelRecord() {
			// #ifndef H5
			this.recorderManager.stop();
			this.recordStart = false;
			// #endif
		},
		// 确认发送录音
		confirm() {
			// #ifndef H5
			uploadFile(this.tempFilePath, "语音", true, "语音发送中...").then(
				(filePath) => {
					console.log("上传的语音文件", filePath);
					this.recordStart = false;
					this.recordStop = false;
					this.close();
					this.$emit("confirm", `${filePath}|${this.recordTime}`);
				}
			);
			// #endif
		},
	},
};
</script>

<style lang="scss" scoped>
.record {
	width: 100%;
	background-color: #fff;
	padding: 90rpx 80rpx 154rpx;
	&-time {
		text-align: center;
		font-size: 40rpx;
		margin-bottom: 40rpx;
	}
	&-row {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.icon1 {
			width: 96rpx;
			height: 96rpx;
		}
		.icon2 {
			width: 220rpx;
			height: 220rpx;
			margin: 0 90rpx;
		}
	}
}
</style>
